<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
	    <form class="form clearfloat">
			<view class="group">
				<text class="t">手机号</text><input :value="userInfo.user_tel ? userInfo.user_tel : ''" data-name="phone" @input="validateForm" placeholder="请输入已绑定的手机" />
			</view>
			<view class="group">
				<text class="t">手机验证码</text>
				<input data-name="code" class="c" @input="validateForm" placeholder='请输入验证码' />
				<text class="g" @click="getCode">{{status}}</text>
			</view>
			<view class="group">
				<text class="t">姓名</text><input :value="userInfo.name ? userInfo.name : ''" data-name="name" @input="validateForm" placeholder="请输入您的姓名" />
			</view>
			<view class="group">
				<text class="t">个性签名</text><textarea :value="userInfo.signature ? userInfo.signature : ''" data-name="sign" class="a" @input="validateForm" placeholder="请输入您的个性签名" />
			</view>
	    </form>
		<view class="btn-area">
			<button plain="false" @click="submit">完善信息</button>
		</view>
	</view>
</template>

<script>
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '完善资料',
				navH: null,
				userInfo: {},
				phone: '',
				code: '',
				name: '',
				sign: '',
				status: '获取验证码',
			}
		},
		onLoad(options) {
			this.navH = this.$store.state.navHeight;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
		},
		methods: {
			// 获取手机验证码
			getCode(e) {
				if (this.phone == '') {
					uni.showToast({ title: '请填写手机号码' });
					return;
				}
				let num = 60, timer = null;
				app.request({
					url: 'entry/wxapp/CheckMobile',
					data: { mobile: this.phone }
				}, (ret) => {
					console.log(ret)
					if (ret.data.code == 200) {
						timer = setInterval(() => {
							if (num > 0) {
								this.status = num + ' s';
								num--;
							} else {
								this.status = '重新获取';
								timer = null;
							}
						}, 1000);
					} else {
						uni.showToast({
							title: ret.data.msg || '系统繁忙，请稍后重试'
						})
					}
				})
			},
			/**
			 * @des 表单验证
			 */
			validateForm (e) {
				console.log(e)
				let tag = e.target, type = tag.dataset.name, value = tag.value;
				if (type === 'phone') {
					this.phone = value;
				} else if (type === 'code') {
					this.code = value;
				}else if(type === 'name') {
					this.name = value;
				}else if(type === 'sign') {
					this.sign = value;
				}
			},
		  // 提交
			submit(e) {
				let _this = this;
				if (this.phone == '' || this.code == '') {
					uni.showToast({ title: '请完善信息' });
				} else {
					app.request({
						url: 'entry/wxapp/Mobile',
						data: {
						  user_id: this.userInfo.id,
						  user_tel: this.phone,
						  code: this.code,
						  user_name: this.name || '',
						  signature: this.sign || '',
						}
					}, (ret) => {
						console.log(ret)
						if (ret.data.status === 1) {
						  uni.showToast({
							title: '提交成功',
							success: () => {
							  app.updateUinfo(this.userInfo.id);  // 更新用户信息
							  setTimeout(function () {
								uni.navigateBack({
								  delta: 1
								})
							  }, 2000)
							}
						  })
						} else {
						  uni.showToast({
							title: ret.data.msg || '系统繁忙，请稍后重试'
						  })
						}
					})
				}
			},
		}
	}
</script>

<style>
	/* pages/set/set.wxss */
	.form {display: block; padding: 20upx; background-color: #fff;}
	.form .group {display: flex; margin: 30upx auto; text-align: left;}
	.form .group .t {flex: 2; line-height: 80upx;}
	.form .group input {flex: 6; height: 80upx; padding: 0 20upx; border: 1px solid #eee; font-size: 30upx;}
	.form .group .c {flex: 4;}
	.form .group .g {flex: 2; text-align: center; line-height: 80upx; background-color: #82d7d0; font-size: 26upx; color: #04867b;}
	.form .group textarea {flex: 6; padding: 20upx; border: 1px solid #eee;}
	.btn-area {margin-top: 40upx;}
	.btn-area button {width: 70%; height: 80upx; border: 0; border-radius: 4px; background-color: #82d7d0; font-size: 32upx; color: #fff; line-height: 80upx;}
	.nosubmit {background-color: #ccc!important;}
</style>
